<template>
    <div class="app-container">
        <el-card class="mr-10" style="width: 400px;" >
            <div class="center">
                <div>志愿咨询</div>
                <img src="@/assets/good_images/common.png" />
            </div>
            <template #footer >
                <router-link 
                    :to="{ name: 'PayView', query: { orderContent: '志愿咨询' }}"
                     class="btn w-full text-center font-bold "
                >
                    点击购买
                </router-link>
            </template>
        </el-card>

        <el-card class="mr-10" style="width: 400px;">
            <div class="center">
                <div>AI服务</div>
                <img src="@/assets/good_images/primary.png" />
            </div>
            <template #footer>
                <router-link 
                    :to="{ name: 'PayView', query: { orderContent: 'AI对话' }}"
                    class="btn w-full text-center font-bold "
                >
                    点击购买
                </router-link>
            </template>
        </el-card>

        <el-card style="width: 400px;" >
            <div class="center">
                <div>敬请期待</div>
                <img  src="@/assets/good_images/highlevel.png" />
            </div>
            <template #footer>
                <router-link 
                    :to="{ name: 'PayView', query: { orderContent: 'AI对话' }}"
                    class="btn w-full text-center font-bold "
                >
                    点击购买
                </router-link>
            </template>
        </el-card>
    </div>
</template>

<script>
export default {
    // 你的脚本内容
}
</script>

<style lang="scss" scoped>
.app-container {
    display: flex;
    justify-content: flex-start;
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 58px;
    
}

.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.btn {
    @apply inline-block px-4 py-2 text-white bg-[rgb(64,158,255)] rounded transition-colors duration-300;
}

.btn:hover {
    @apply bg-blue-700; /* 悬停时颜色 */
}

.btn:focus {
    @apply bg-blue-800; /* 焦点时颜色 */
}
</style>
